<template>
	<common-page tab padding="0">
    <view class="flex justify-end margin-top-32 padding-right-32">
			<view class="btn-add-icon" @click="bindGoToAddDevice"></view>
    </view>
		<view style="padding: 0 32rpx;">
			<u-subsection
				class="page-custom-section"
				:list="list" mode="button" :current="currentIndex"
				activeColor="#fff" inactiveColor="#333333"
				fontSize="30rpx"
				keyName="label"
				@change="bindSectionChange"
			></u-subsection>
		</view>
		<view class="content-wrap">
			<swiper class="swiper" :current="currentIndex" @change="bindSwiperChange">
				<swiper-item :current-item-id="0">
					<scroll-view scroll-y class="scroll-view">
						<view class="wrap">
							<device-item v-for="(item,index) in allDeviceListData" :key="index" :item="item"></device-item>
							<u-loadmore :status="status" color="#AFAFAF" fontSize="26rpx" :nomore-text="allDeviceListData.length?'没有更多了':'暂无设备'" />
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :current-item-id="1">
					<scroll-view scroll-y class="scroll-view">
						<view class="wrap">
							<device-item v-for="(item,index) in warningDeviceListData" :key="index" :item="item"></device-item>
							<u-loadmore :status="status" color="#AFAFAF" fontSize="26rpx" :nomore-text="warningDeviceListData.length?'没有更多了':'暂无设备'" />
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :current-item-id="2">
					<scroll-view scroll-y class="scroll-view">
						<view class="wrap">
							<device-item v-for="(item,index) in onlineDeviceListData" :key="index" :item="item"></device-item>
							<u-loadmore :status="status" color="#AFAFAF" fontSize="26rpx" :nomore-text="onlineDeviceListData.length?'没有更多了':'暂无设备'" />
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :current-item-id="3">
					<scroll-view scroll-y class="scroll-view">
						<view class="wrap">
							<device-item v-for="(item,index) in offlineDeviceListData" :key="index" :item="item"></device-item>
							<u-loadmore :status="status" color="#AFAFAF" fontSize="26rpx" :nomore-text="offlineDeviceListData.length?'没有更多了':'暂无设备'" />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
  </common-page>
</template>

<script>
// noinspection NpmUsedModulesInstalled
import { mapGetters } from 'vuex';
export default {
	components: {
	},
	data() {
		return {
			list: [{
				label: '全部'
			}, {
				label: '预警'
			}, {
				label: '在线'
			}, {
				label: '离线'
			}],
			currentIndex: 0,
			status: 'nomore',
			allDeviceListData: [], // 全部
			warningDeviceListData: [], // 预警
			onlineDeviceListData: [], // 在线
			offlineDeviceListData: [] // 离线
		};
	},
	computed: {
		...mapGetters('user', ['companyId', 'token','companyName','userType'])
	},
	onLoad() {
		if( this.userType == 2 ) {
			uni.setNavigationBarTitle({
				title: this.companyName
			})
		}
		this.getDeviceList();
	},
	onPullDownRefresh() {
		this.getDeviceList();
	},
	methods: {
		async getDeviceList() {
			this.status = 'loading';
			const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-device/getList'));
			if (err) return;
			this.status = 'nomore';
			this.allDeviceListData = result;
			result.forEach(item => {
				if (item.status == 0) {
					this.onlineDeviceListData.push(item);
				} else {
					this.offlineDeviceListData.push(item);
				}
				if (item.fallInfo) {
					this.warningDeviceListData.push(item);
				}
			});
		},
		init() {
			// uni.$u.http.get('/api/index').then(res => {
			// 	console.log(res.data);
			// }).catch(() => {});
		},
		bindSectionChange(ev) {
			this.currentIndex = ev;
		},
		bindSwiperChange(ev) {
			this.currentIndex = ev.detail.current;
		},
		// 去添加设备
		bindGoToAddDevice() {
			uni.navigateTo({
				url: '/pages/device/add'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.btn-add-icon {
	width: 63rpx;
	height: 63rpx;
	background: url('../../static/icons/add_device_icon.png') center no-repeat;
	background-size: contain;
}
::v-deep .u-subsection {
	height: 66rpx !important;
	border-radius: 66rpx !important;
	padding: 0 !important;
	margin-top: 24rpx !important;
	.u-subsection__bar {
		border-radius: 66rpx !important;
		background-color: #417CE9;
		height: 66rpx !important;
	}
}
.content-wrap {
	height: calc(100vh - 66rpx - 24rpx - 95rpx - var(--window-top) - var(--window-bottom));
	box-sizing: border-box;
	.swiper {
		height: 100%;
	}
	.scroll-view {
		height: 100%;
		box-sizing: border-box;
		.wrap {
			padding: 32rpx 32rpx 1rpx;
		}
	}
}
</style>
